<template>
  <div>
    <div class="filter-container">
      <el-checkbox
        :indeterminate="isIndeterminate"
        v-model="checkAllTow"
        @change="handleCheckAllChange"
        >全选</el-checkbox
      >
      <el-checkbox-group @change="selectCheckbox" v-model="checkboxVal">
        <el-checkbox
          :label="item"
          v-for="(item, index) in formThead"
          :key="index"
        >
          {{ item }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <!-- 表格 -->
    <el-table
      :key="tableKey"
      :data="data"
      :border="border"
      :stripe="stripe"
      style="width: 100%"
      :max-height="maxHeightSS"
      :show-summary="showSummary"
      :summary-method="getSummaries"
      :header-cell-style="headerCellStyle"
      @selection-change="selectionChange"
      v-loading="loading"
      fit
    >
      <template v-for="(item, index) in column">
        <slot v-if="item.slot" :name="item.slot" />
        <el-table-column
          v-else
          :key="index"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :align="item.align"
          :fixed="item.fixed"
          :show-overflow-tooltip="item.showTop"
        />
      </template>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size.sync="pageSize"
      :page-sizes="pageSizes"
      :layout="layout"
      :total="total"
      :hide-on-single-page="hidePagination"
    >
    </el-pagination>
  </div>
</template>

<script>
import { scrollTo } from "@/utils/scrollTo";
export default {
  name: "MyTbale",
  props: {
    isIndeterminate: Boolean,
    checkAll: [Array, Boolean],
    tableKey: Number,
    checkboxVal: Array,
    formThead: Array,
    data: {
      type: Array,
      required: true, // 必传
    },
    column: {
      type: Array,
      required: true, // 必传
    },
    summaryMethodData: Array, // 合计数组
    maxHeightSS: Number,
    showSummary: Boolean,
    border: Boolean,
    stripe: Boolean,
    loading: Boolean,
    headerCellStyle: Object,

    // ----------分页

    total: [String, Number],
    layout: {
      type: String,
      default: "total, sizes, prev, pager, next, jumper",
    },
    page: {
      type: Number,
      default: 1,
    },
    limit: {
      type: Number,
      default: 20,
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 20, 30, 50];
      },
    },
    autoScroll: {
      type: Boolean,
      default: true,
    },
    hidePagination: Boolean,
  },

  data() {
    return {
      checkAllTow: false,
    };
  },

  watch: {
    // checkboxVal(valArr) {
    //   this.column = this.column.filter((i) => {
    //     console.log(i);
    //     return valArr.indexOf(i.label) >= 0;
    //   });
    //   // this.key = this.key + 1; // 为了保证table 每次都会重渲 In order to ensure the table will be re-rendered each time
    // },
  },

  computed: {
    currentPage: {
      get() {
        return this.page;
      },
      set(val) {
        this.$emit("update:page", val);
      },
    },
    pageSize: {
      get() {
        return this.limit;
      },
      set(val) {
        this.$emit("update:limit", val);
      },
    },
  },

  methods: {
    handleCheckAllChange(val) {
      this.$emit("changeCheck", this.checkAllTow);
    },
    selectCheckbox(val) {
      this.$emit("selectCheckbox", val);
    },

    handleSizeChange(val) {
      this.$emit("pagination", { page: this.currentPage, limit: val });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },
    handleCurrentChange(val) {
      this.$emit("pagination", { page: val, limit: this.pageSize });
      if (this.autoScroll) {
        scrollTo(0, 800);
      }
    },

    selectionChange(enev) {
      this.$emit("selection-change", enev);
    },

    getSummaries(param) {
      const { columns } = param;
      const sums = [];
      columns.forEach((column, index) => {
        sums[index] = "";
        if (index === 1) {
          sums[index] = "合计";
          return;
        }
        const values = this.summaryMethodData.map(
          (item) => item[column.property]
        );
        sums[index] = values.map((v) => {
          if (v) {
            return String(v) + " $";
          }
        });
      });
      return sums;
    },
  },
};
</script>

<style  scoped>
.el-pagination {
  background-color: #545c64;
}
</style>
<style >
.el-pagination span:not([class*="suffix"]),
.el-pagination button {
  color: #fff !important;
}

.el-pagination .el-select .el-input .el-input__inner {
  background-color: #545c64;
  color: #fff;
}

.el-pagination .btn-prev {
  background-color: #545c64;
}
.el-pagination .btn-next {
  background-color: #545c64;
}
.el-pager li {
  background-color: #545c64;
  color: #fff;
}

.el-pagination__editor.el-input .el-input__inner {
  background-color: #545c64;
  color: #fff;
  cursor: pointer;
}
.el-pagination button:disabled {
  background-color: #545c64;
}
</style>
